<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>eCharts 无缝滚动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding: 20px;
      background: #222;
      font-size: 0;
    }

    .chartBox {
      width: 700px;
      height: 400px;
      background: #fff;
    }
  </style>
</head>

<body>

  <div id="chartBox" class="chartBox"></div>



  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.common.min.js"></script>
  <script>
    $(function () {
      var data = {
        names: [
          '1月', '2月', '3月', '4月', '5月', '6月',
          '7月', '8月', '9月', '10月', '11月', '12月',
        ],
        series: [{
          name: '呼入',
          data: [
            20, 25, 30, 35, 40, 45,
            50, 55, 60, 65, 70, 75,
          ],
        },
		{
          name: '呼出',
          data: [
            30, 35, 40, 45, 50, 55,
            60, 65, 70, 75, 80, 85
          ]
        },
		],
      };
      chartFun($('#chartBox'), data);

      function chartFun(dom, chartData, time) {
        var chart = echarts.init(dom.get(0));
        var chartOptions = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            }
          },
          legend: {
            data: []
          },
          grid: {
            top: "13%",
            bottom: "5%",
            left: "5%",
            right: "8%",
            containLabel: true
          },
          xAxis: [{
            name: '月份',
            type: 'category',
            boundaryGap: true,
            data: []
          }],
          yAxis: [{
            type: 'value',
            scale: true,
            min: 0,
            name: '预购量',
          }],
          series: [{
            name: '',
            type: 'bar',
            data: []
          },
          {
            name: '',
            type: 'bar',
            data: []
          }]
        };

        var maxIndex = 6, // 最大显示个数
          curIndex = 0; // 当前显示的第一项下标

        setInter();

        function setInter() {
          var ops = {
              names: [],
              series: [{
                  name: "新增",
                  data: []
                },
                {
                  name: "办结",
                  data: []
                },
              ]
            },
          leng = chartData.names.length,
            
          isIntval = leng > maxIndex;

          maxIndex = isIntval ? maxIndex : leng;

          for (var i = curIndex; i < curIndex + maxIndex; i++) {

            var j = i >= leng ? i - leng : i;

            ops.names.push(chartData.names[j]);

            ops.series[0].data.push(chartData.series[0].data[j]);

            ops.series[1].data.push(chartData.series[1].data[j]);

          }
          chartOptions.xAxis[0].data = ops.names;

          chartOptions.legend.data = [];

          ops.series.map(function (item, index) {

            chartOptions.legend.data.push(item.name);

            chartOptions.series[index].name = item.name;

            chartOptions.series[index].data = item.data;

          });
          chart.setOption(chartOptions);

          if (isIntval) {

            setTimeout(function () {

              curIndex = curIndex >= leng ? 0 : curIndex;

              curIndex++;

              setInter();

            }, time || 3 * 1000);
            
          }
        }

      }

    });
  </script>
</body>

</html>